<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/10/20 0020
  Time: 10:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>车辆租用历史--列表页</title>
    <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
    <link href="/static/plugins/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="/static/plugins/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
    <link rel="stylesheet" href="/static/css/carcom.css">
    <style>
        .search{
            border-bottom: 1px solid #cccccc ;
            padding-top: 1%;
            padding-bottom: 1%;
            padding-left:5% ;
            margin-bottom: 1%;
        }
        .layui-form-label{
            width: 32%;
            text-align: center;
        }
        .layui-inline {
            margin-top: 10px;
            text-align: center;
            width: 23%;
        }
    </style>
</head>
<body>
<div class="wrap_padding35">
     <%--面包屑--%>
    <span class="layui-breadcrumb nav">
        <a href="javascript:" class="a1">首页</a>
        <a href="javascript:" class="a2">车辆租用历史</a>
    </span>
         <div class="search">
             <div class="layui-form-item">
                 <div class="layui-inline">
                     <label class="layui-form-label">车牌号码:</label>
                     <div class="layui-input-inline">
                         <input type="text" name="carcode" lay-verify="required" placeholder="请输入车牌号" autocomplete="off" class="layui-input">
                     </div>
                 </div>

                 <div class="layui-inline">
                     <label class="layui-form-label">开始时间:</label>
                     <div class="layui-input-inline">
                         <input type="text" class="layui-input" id="begin" placeholder="请选择开始时间">
                     </div>
                 </div>

                 <div class="layui-inline">
                     <label class="layui-form-label">截止时间:</label>
                     <div class="layui-input-inline">
                         <input type="text" class="layui-input" id="end" placeholder="请选择截止时间">
                     </div>
                 </div>

                 <button class="layui-btn layui-btn-lg layui-btn-normal" id="btn_search">搜索</button>
                 <button class="layui-btn layui-btn-primary" id="btn_res">重置</button>

             </div>
         </div>

    <table id="tb_renthistory"></table>
</div>
<%--1、引入jQuery组件--%>
<script src="/static/plugins/jquery.js"></script>
<script src="/static/plugins/layui/layui.js"></script>
<%--2、引入bootstrap组件--%>
<script src="/static/plugins/bootstrap/js/bootstrap.js"></script>
<%--3、bootstrap table组件以及中文包的引用--%>
<script src="/static/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="/static/plugins/bootstrap-table/bootstrap-table-zh-CN.js"></script>
<script>
    layui.use(["element","layer","laydate"],function () {
        var element = layui.element;
        var layer = layui.layer;
        var laydate = layui.laydate;

        laydate.render({
            elem: '#begin'
            ,type:"datetime"
        });

        laydate.render({
            elem:"#end"
            ,type:"datetime"
        });

        $("#tb_renthistory").bootstrapTable({
            url: '/carOrder/rentHistoryData',         //请求后台的URL（*）
            method: 'get',                      //请求方式（*）
//            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
//            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）

            onLoadSuccess:click,
            pagination: true,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: function (data) {
                var params = {
                    offset:data.offset,
                    limit:data.limit
                };
                return params
            },                  // 传递自定义参数,还要加上offset，limit（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 15, 20, 50],        //可供选择的每页的行数（*）
            showRefresh: true,                  //是否显示刷新按钮
            clickToSelect: true,                //是否启用点击选中行
            height: 700,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "id",                     //每一行的唯一标识，一般为主键列
            columns: [
                {
                    checkbox: true
                }, {
                    field: 'clientUser.name',
                    title: '租车人',
                    align:"center"
                }, {
                    field: 'clientUser.mobile',
                    title: '租车手机',
                    align:"center"
                }, {
                    field: 'carcode',
                    title: '租用车辆',
                    align:"center"
                },{
                    field: 'readybttime',
                    title: '租车时间',
                    align:"center",
                    formatter:function (value, row, index) {
                        if(isNaN(value)){
                            return "--";
                        } else {
                            var time = new Date(value);
                            return time.toLocaleDateString().replace("/","-").replace("/","-");
                        }
                    }
                }, {
                    field: 'readettime',
                    title: '还车时间',
                    align:"center",
                    formatter:function (value, row, index) {
                        if(isNaN(value)){
                            return "--";
                        } else {
                            var time = new Date(value);
                            return time.toLocaleDateString().replace("/","-").replace("/","-");
                        }
                    }
                },{
                    field: 'returnillegal',
                    title: '违章',
                    align:"center"
                },{
                    field: 'returndamage',
                    title: '车损',
                    align:"center"
                },{
                    field: 'realbasic',
                    title: '出险',
                    align:"center"
                },{
                    field: 'btrentdept',
                    title: '取车地点',
                    align:"center"
                },{
                    field: 'etrentdept',
                    title: '还车地点',
                    align:"center"
                },{
                    field: 'realetmile-realbtmile',
                    title: '行驶里程',
                    align:"center"
                },{
                    field: '',
                    title: '操作',
                    align:"center",
                    formatter:function () {
                        return '<a href="javascript:void(0)" class="detalis">查看详情</a>'
                    }
                }
            ]
        });


        // 搜索
        $("#btn_search").click(function (data) {

            var carcode = $("input[name=carcode]").val();
            var readybttime = $("#begin").val();
            var readettime = $("#end").val();

            $("#tb_renthistory").bootstrapTable("refresh", {
                query: {
                    carcode: carcode,
                    readybttime: readybttime,
                    readettime:readettime
                }
            });
        });

        // 重置
        $("#btn_res").click(function () {
            $("input[name=carcode]").val("");
            $("#begin").val("");
            $("#end").val("");
        });

        function click() {
            $(".detalis").click(function () {
                var rows = $("#tb_renthistory").bootstrapTable('getSelections'); // 获取选中行
                layer.open({
                    type: 2,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['420px', '240px'], //宽高
                    title:"详细信息",
                    content: ""
                });
            })
        }
    })
</script>
</body>
</html>
